<template>
	<view class="body">
		<view class="head">
			<view class="head_left" @click="back"><image src="/static/img/fanhui.png" ></image></view>
			<view class="head_center hei_38_bold">修改密码</view>
			<view class="head_right hei_30"></view>
		</view>
		<view class="content">
			<view class="login_input ">
				
			    <view class="display_flex gaimima hei_28" ><text>个人账号</text> <text>{{user.username}}</text></view>
			    <view class="display_flex">
			        <input type="text" placeholder="原始密码" value="" v-model="yuan" class="hei_28">
			    </view>
			
			    <view class="display_flex ">
			
			        <input :type="type1" value="" placeholder="新密码" @input="mimashu" class="hei_28" />
			        <image :src="yan1_zhuangtai" mode="" @click="chakan(1)" :class="['yanjing', type1 == 'text' ? 'kai' : 'guan']"></image>
			    </view>
			    <view class="display_flex">
			
			        <input :type="type2" value="" placeholder="确认密码" @input="agamimashu" class="hei_28" />
			        <image :src="yan2_zhuangtai" mode="" @click="chakan(2)" :class="['yanjing', type2 == 'text' ? 'kai' : 'guan']"></image>
			    </view>
			
			</view>
			<view class="zhuce_bottom">
			    <button @click="onRegister()" class="zhuce_btn bai_30">确认修改</button>
			
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img_url: uni.getStorageSync('img_url'),
			yuan: '',
			mima: '',
			agamima: '',
			type1: 'password',
			type2: 'password',
			yan1_zhuangtai: '/static/img/yanguan.png',
			yan2_zhuangtai: '/static/img/yanguan.png',
			user:'',
		};
	},

	onShow() {},
	onLoad(option) {
		this.get_user()
	},
	methods: {
		back() {
			uni.navigateBack();
		},
        get_user() {
			this.$http
				.get({
					url: '/api/getUserInfo'
				})
				.then(res => {
					if (res.code == 200) {
						this.user = res.user;
					}
				});
		},
		chakan(e) {
			if (e == 1) {
				if (this.type1 == 'password') {
					this.type1 = 'text'
					this.yan1_zhuangtai = '/zu/static/img/yankai.png';
				} else {
					this.type1 = 'password'
					this.yan1_zhuangtai = '/zu/static/img/yanguan.png'
				}
			} else {
				if (this.type2 == 'password') {
					this.type2 = 'text' 
					this.yan2_zhuangtai = '/zu/static/img/yankai.png'
				} else {
					this.type2 = 'password'
					this.yan2_zhuangtai = '/zu/static/img/yanguan.png'
				}
			}
		},
		onRegister() {
			
			
			if (this.yuan == '' || this.mima == '' || this.agamima == '') {
				uni.showToast({
					title: '请填写完整',
					duration: 2000,
					icon: 'none'
				});
				return false;
			} else if (this.mima != this.agamima) {
				uni.showToast({
					title: '两次密码不一致',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			this.$http
				.post({
					url: '/api/changePassword',
					data: {
						oldPassword: this.yuan,
						newPassword: this.mima
					}
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
		                setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/index/login'
							});
						},500)
						
					}
				});
		
			console.log(this.yuan, this.mima, this.agamima);
		},
		mimashu(e) {
			this.mima = e.target.value;
		},
		agamimashu(e) {
			this.agamima = e.target.value;
		}
	}
};
</script>

<style>
.head {
	
}
.content {
	
}
.zhuce_bottom{
	padding: 0 30rpx;
}

.login_input {
	padding: 0 30rpx;
}

.login_input .display_flex {
	justify-content: space-between;
	border-bottom: 1px solid #dfdfdf;
	padding: 30rpx 0;
	
	display: flex;
	align-items: center;
}

.login_input view input {
	outline: none;
	width: 96%;
	font-size: 24rpx;
	border: none;
}
 .zhuce_btn{
	background: #ff2b46;
	margin-top: 480rpx;
	border-radius:50rpx;
}
.display_flex image{
	
}
.kai {
	width: 29rpx !important;
	height: 19rpx !important;
}
.guan {
	width: 28rpx !important;
	height: 14rpx !important;
}
</style>
